<template>
	<view class="wrap">
		<img class="logo" src="../../../static/aidex/images/favicon.png" />
		<view class="form1">
			<view class="item">
				<view class="left">
					卡号
				</view>
				<view class="right">
					<u-input placeholder="请输入兑换卡号" v-model="code" type="number" />
				</view>

			</view>
			<view class="item">
				<view class="left">
					密码
				</view>
				<view class="right">
					<u-input placeholder="请输入兑换密码" v-model="psw" type="password" />
				</view>
			</view>
		</view>
		<view class="tips">
			<view class="title">
				绑卡说明：
			</view>
			<view class="infos">
				<view class="">
					*请扫描手中提货卡专属二维码，或者输入卡上的卡号与密码，点击添加提货卡，该卡将自动添加到您的账户里。
				</view>
				<view class="">*一旦成功添加，您手中卡片上的二维码和卡号将失效！
				</view>
				<view class="">*添加提货卡即视为绑卡激活，有任何疑问请联系客服。

				</view>客服服务时间：周一到周日（9:00-22:00）
			</view>
		</view>

		<u-button @click="add" class="sub" type="primary" shape="circle" :ripple="true" ripple-bg-color="#909399">
			添加有机卡</u-button>
		<calltem />
	</view>


</template>
<script>
	import calltem from '@/components/call.vue'
	export default {
		components: {
			calltem
		},
		data() {
			return {
				code: '',
				psw: ''
			};
		},
		onLoad() {

		},
		onShow() {
			if (!this.vuex_token2) {
				uni.redirectTo({
					url:"/pages/sys/login/index"
				})
				
			}
		},
		methods: {
			add() {
				if (!this.code) {
					this.$u.toast('请输入卡号！');
					return
				}
				if (!this.psw) {
					this.$u.toast('请输入密码！');
					return
				}


				this.$u.api.bindCard({
						"cardNo": this.code,
						"cardPwd": this.psw
					})
					.then((res) => {

						if (res.code == 0) {
							uni.showToast({
								icon: "none",
								title: "绑卡成功! 请到我的有机卡查看",
								duration:2000
							})

							this.code = '';
							this.psw = ''
							uni.switchTab({
								url:"/pages/sys/msg/index"
							})
						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							console.log("请求数据失败");
						}
					});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},

		}
	};
</script>
<style lang="scss">
	page {
		background: #005850;
		padding: 48rpx 35rpx 305rpx;
	}
</style>
<style lang="scss" scoped>
	.wrap {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 33rpx 33rpx 98rpx;

		.sub {
			margin: 180rpx 0 0;
			height: 88rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
		}

		.logo {
			width: 269rpx;
			display: block;
			margin: 70rpx auto;
		}

		.tips {
			.title {
				margin-bottom: 24rpx;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 26rpx;
				color: #024546;
				line-height: 31rpx;
			}

			.infos {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 26rpx;
				color: #024546;
				line-height: 31rpx;

				>view {
					margin-bottom: 10rpx;
					text-align: justify;
				}


			}
		}

		.form1 {
			margin-bottom: 15rpx;

			.item {
				padding-right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 25rpx;
				margin-bottom: 28rpx;

				.left {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 30rpx;
					color: #024546;
					padding: 0 60rpx 0 48rpx;
				}

				.right {
					flex: 1;
				}
			}
		}
	}
</style>
